<template>
  <div class="houses_box">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="detail.title"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 图片 -->
    <van-image
      width="100%"
      height="100%"
      fit="scale-down"
      :src="'http://liufusong.top:8080' + `${houseImg[0]}`"
    />
    <!-- 房屋描述 -->
    <div class="desc">
      <!-- 房屋名称 -->
      <div class="house_name">
        <h3>{{ detail.title }}</h3>
        <van-tag v-for="(item, index) in detail.tags" :key="index">{{
          item
        }}</van-tag>
      </div>
      <!-- 房屋价钱 -->
      <div class="house_price">
        <div class="txt">
          <h3>{{ detail.price }}/月</h3>
          <span>租金</span>
        </div>
        <div class="txt">
          <h3>{{ detail.roomType }}</h3>
          <span>房型</span>
        </div>
        <div class="txt">
          <h3>{{ detail.size }}平米</h3>
          <span>面积</span>
        </div>
      </div>
      <!-- 房屋风格 -->
      <div class="house_style">
        <div class="house_type">
          <span>装修：</span>
          <span>精装</span>
        </div>
        <div class="house_type">
          <span>朝向：</span>
          <span v-for="(item, index) in oriented" :key="index">{{ item }}</span>
        </div>
        <div class="house_type">
          <span>楼层：</span>
          <span>{{ detail.floor }}</span>
        </div>
        <div class="house_type">
          <span>类型：</span>
          <span>普通住宅</span>
        </div>
      </div>
    </div>
    <!-- 房屋位置 -->
    <div class="location">
      <div class="house_map">
        <div class="house_type house_map_type">
          <span>小区：</span>
          <span>{{ detail.community }}</span>
        </div>
        <div class="house_img">
          <img
            src="http://liufusong.top:8080/uploads/upload_b784896582952b9d259e21acea40f8a4.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="house_config">
        <p class="configTitle">房屋配置</p>
        <div class="configList">
          <van-tag v-for="(item, index) in detail.supporting" :key="index">{{
            item
          }}</van-tag>
        </div>
      </div>
    </div>
    <div class="btns">
      <button>☆收藏</button>
      <button>在线咨询</button>
      <button>电话预约</button>
    </div>
  </div>
</template>

<script>
import { getHousesDetail } from '@/api/house'
export default {
  name: 'detail-page',
  data() {
    return {
      coord: [],
      houseImg: [],
      oriented: [],
      supporting: [],
      detail: {}
    }
  },
  methods: {},
  async created() {
    // console.log(this.$route.params.id)
    const id = this.$route.params.id
    const { body } = await getHousesDetail(id)
    console.log(body)
    this.detail = body
    this.coord = body.coord
    this.houseImg = body.houseImg
    this.oriented = body.oriented
    this.supporting = body.supporting
    console.log(this.detail)
  }
}
</script>

<style scoped lang="less">
.houses_box {
  background-color: #f6f5f6;
}
// 房屋描述
.desc {
  background-color: #fff;
  padding: 0 10px;
  //   房屋名称
  .house_name {
    height: 80px;
    border-bottom: 1px solid #cecece;
    h3 {
      height: 20px;
      font-size: 16px;
      margin-bottom: 16px;
      color: #333;
    }
    .van-tag {
      display: inline-block;
      width: 46px;
      height: 20px;
      color: #39becd;
      font-size: 12px;
      background-color: #e1f5fb;
      margin-right: 5px;
      padding: 4px 5px;
      text-align: center;
      line-height: 20px;
    }
  }
  //   房屋价钱
  .house_price {
    display: flex;
    height: 100px;
    border-bottom: 1px solid #cecece;
    justify-content: space-between;
    align-items: center;
    .txt {
      text-align: center;
      width: 110px;
      height: 52px;
      h3 {
        font-size: 18px;
        color: #fa5741;
      }
      span {
        color: #999;
        font-size: 14px;
      }
    }
  }
  //   房屋风格
  .house_style {
    padding: 20px 0;
  }
}
.house_type {
  display: inline-block;
  height: 26px;
  width: 50%;
  font-size: 13px;
  font-family: Microsoft YaHei;
  span:first-child {
    color: #999;
  }
  span:last-child {
    color: #333;
  }
}
.location {
  background-color: #fff;
  margin: 10px 0;
  .house_map_type {
    width: 100%;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    padding-left: 10px;
  }
  .house_img {
    width: 100%;
    height: 120px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .house_config {
    padding-bottom: 50px;
    .configTitle {
      height: 44px;
      line-height: 44px;
      padding-left: 10px;
    }
    .configList {
      padding-left: 10px;
      .van-tag {
        display: inline-block;
        width: 46px;
        height: 20px;
        color: #39becd;
        font-size: 12px;
        background-color: #e1f5fb;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 4px 5px;
        text-align: center;
        line-height: 20px;
      }
    }
  }
}
.btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #cecece;
  button {
    height: 50px;
    width: 34%;
    background-color: #fff;
    border-right: 1px solid #e8e8e9;
    color: #999;
    &:last-child{
      background-color: #50b979;
      color: #fff;
    }
  }
}
</style>
